'use client';

import React from 'react';

interface BookingData {
  name: string;
  phone: string;
  email?: string;
  wechat?: string;
  date: string;
  timeSlot: string;
  notes?: string;
}

interface BookingFormProps {
  bookingData: BookingData;
  onInputChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  onSubmit: (e: React.FormEvent) => void;
}

const BookingForm: React.FC<BookingFormProps> = ({ bookingData, onInputChange, onSubmit }) => {
  // 电话号码格式验证
  const validatePhone = (phone: string): boolean => {
    const phoneRegex = /^1[3-9]\d{9}$/;
    return phoneRegex.test(phone);
  };

  // 邮箱格式验证
  const validateEmail = (email: string): boolean => {
    const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
    return emailRegex.test(email);
  };

  // 检查表单是否可以提交
  const canSubmit = () => {
    return (
      bookingData.name.trim() !== '' &&
      bookingData.phone.trim() !== '' &&
      validatePhone(bookingData.phone.trim()) &&
      (!bookingData.email || bookingData.email.trim() === '' || validateEmail(bookingData.email.trim()))
    );
  };

  return (
    <form onSubmit={onSubmit} className="space-y-8">
      {/* 已选择的预约信息预览 */}
      <div className="bg-teal-50 rounded-xl p-5 mb-8 border border-teal-100">
        <h3 className="text-lg font-semibold text-teal-700 mb-3">预约信息确认</h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="flex items-center p-3 bg-white rounded-lg shadow-sm">
            <svg className="w-5 h-5 text-teal-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
            </svg>
            <div>
              <span className="text-gray-500 text-sm">日期：</span>
              <span className="font-medium">{new Date(bookingData.date).toLocaleDateString('zh-CN')}</span>
            </div>
          </div>
          <div className="flex items-center p-3 bg-white rounded-lg shadow-sm">
            <svg className="w-5 h-5 text-teal-600 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <div>
              <span className="text-gray-500 text-sm">时间：</span>
              <span className="font-medium">{bookingData.timeSlot}</span>
            </div>
          </div>
        </div>
      </div>

      {/* 个人信息输入 */}
      <div className="space-y-6">
        {/* 姓名 */}
        <div>
          <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
            姓名 <span className="text-red-500">*</span>
          </label>
          <input
            type="text"
            id="name"
            name="name"
            value={bookingData.name}
            onChange={onInputChange}
            placeholder="请输入您的姓名"
            className="w-full px-5 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all duration-200 shadow-sm"
            required
          />
        </div>

        {/* 手机号码 */}
        <div>
          <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-2">
            手机号码 <span className="text-red-500">*</span>
          </label>
          <input
            type="tel"
            id="phone"
            name="phone"
            value={bookingData.phone}
            onChange={onInputChange}
            placeholder="请输入11位手机号码"
            className={`w-full px-5 py-3 rounded-xl focus:ring-2 focus:border-transparent transition-all duration-200 shadow-sm
              ${bookingData.phone && !validatePhone(bookingData.phone) 
                ? 'border-red-300 focus:ring-red-500'
                : 'border-gray-300 focus:ring-teal-500 focus:border-teal-500'}
            `}
            required
          />
          {bookingData.phone && !validatePhone(bookingData.phone) && (
            <p className="mt-1 text-sm text-red-500">请输入有效的11位手机号码</p>
          )}
        </div>

        {/* 邮箱 */}
        <div>
          <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
            邮箱（选填）
          </label>
          <input
            type="email"
            id="email"
            name="email"
            value={bookingData.email || ''}
            onChange={onInputChange}
            placeholder="请输入您的邮箱地址"
            className={`w-full px-5 py-3 rounded-xl focus:ring-2 focus:border-transparent transition-all duration-200 shadow-sm
              ${bookingData.email && !validateEmail(bookingData.email) 
                ? 'border-red-300 focus:ring-red-500'
                : 'border-gray-300 focus:ring-teal-500 focus:border-teal-500'}
            `}
          />
          {bookingData.email && !validateEmail(bookingData.email) && (
            <p className="mt-1 text-sm text-red-500">请输入有效的邮箱地址</p>
          )}
        </div>

        {/* 微信 */}
        <div>
          <label htmlFor="wechat" className="block text-sm font-medium text-gray-700 mb-2">
            微信（选填）
          </label>
          <input
            type="text"
            id="wechat"
            name="wechat"
            value={bookingData.wechat || ''}
            onChange={onInputChange}
            placeholder="请输入您的微信账号"
            className="w-full px-5 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all duration-200 shadow-sm"
          />
        </div>

        {/* 备注 */}
        <div>
          <label htmlFor="notes" className="block text-sm font-medium text-gray-700 mb-2">
            备注信息（选填）
          </label>
          <textarea
            id="notes"
            name="notes"
            value={bookingData.notes || ''}
            onChange={onInputChange}
            placeholder="请输入您的咨询内容或其他需要说明的事项"
            rows={4}
            className="w-full px-5 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all duration-200 shadow-sm"
          ></textarea>
        </div>
      </div>

      {/* 提交按钮 */}
      <div className="mt-10">
        <button
          type="submit"
          disabled={!canSubmit()}
          className={`w-full px-8 py-4 rounded-xl transition-all duration-300 font-medium text-white
            transform hover:scale-[1.02] active:scale-[0.98]
            ${!canSubmit() 
              ? 'bg-gray-300 text-gray-500 cursor-not-allowed shadow'
              : 'bg-teal-600 hover:bg-teal-700 shadow-lg hover:shadow-xl'}
          `}
        >
          提交预约
        </button>
      </div>
    </form>
  );
};

export default BookingForm;